<html>
<head>

<link rel="stylesheet" href="drag.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jqDnR.js"></script>

<script type="text/javascript">
	$(document).ready(function() {
	$('#layer2').jqDrag();
	$('#layer4').jqDrag();
	$('#layer6').jqDrag();
	 $('#layer2').jqResize('.jqResize');
	 $('#layer4').jqResize('.jqResize');


		$("#layer1").hide();

		$("#content121").css({
			"position" : "absolute",
			"top" : "100",
			"left" : "0",
			"width" : "1339"
		});
		$("#layer2").css({
			"width" : "400"
		})
		$("#layer3").css({
			"width" : "400"
		})

		$("#layer4").css({
			"left" : "460",
			"width" : "400"
		})
		$("#layer5").css({
			"width" : "400"
		})
		$("#layer6").css({
			"left" : "900",
			"width" : "400"
		})
		$("#layer7").css({
			"width" : "400"
		})

		$("#close1").click(function() {

			$("#close1").hide();
			$("#layer1").show();
			$("#content121").css({
				"position" : "absolute",
				"top" : "100",
				"left" : "288",
				"width" : "1045",
				"height" : "787"
			});

			$("#layer2").css({
				"width" : "300",
				"left" : "25"
			})
			$("#layer3").css({
				"width" : "300"
			})

			$("#layer4").css({
				"width" : "300",
				"left" : "370"
			})
			$("#layer5").css({
				"width" : "300"
			})
			$("#layer6").css({
				"width" : "300",
				"left" : "720"
			})
			$("#layer7").css({
				"width" : "300"
			})

			return false;
		});
		$("#close").click(function() {

			$("#close1").show();
			$("#layer1").hide();

			$("#content121").css({
				"position" : "absolute",
				"top" : "100",
				"left" : "0",
				"width" : "1339"
			});
			$("#layer2").css({
				"width" : "400"
			})
			$("#layer3").css({
				"width" : "400"
			})

			$("#layer4").css({
				"left" : "460",
				"width" : "400"
			})
			$("#layer5").css({
				"width" : "400"
			})
			$("#layer6").css({
				"left" : "900",
				"width" : "400"
			})
			$("#layer7").css({
				"width" : "400"
			})

			return false;
		});
	})
	
	var strtest='thomas_joseph_mathew';
	
	function testReplace()
	{
		test="/k/;;_ut";
		test = test.replace(/;/g, '/semclmn' );
		test = test.replace(/_/g, '/undrscr' );
		alert(test);
		
		
		
		
	}
</script>
</head>
<body>




	<div id="header"
		style="position: absolute; top: 3; left: 4; width: 1330; height: 80; z-index: 1; padding: 5px; border: #000000 2px solid; background-color: ghostwhite;">
		<h1 align="center">My test page</h1>
	</div>
	<
	<div id="content121"
		style="position: absolute; top: 100; left: 288; width: 1045; height: 787; z-index: 1; padding: 5px; background-color: white;">
		<a href="" id="close1"
			style="position: absolute; top: 0; left: 0; width: 20; height: 10; z-index: 1; padding: 5px; border: #000000 2px; background-color: azure;"></a><br>



		<div id="layer2"
			style="position: absolute; top: 0; left: 25; width: 300; height: 200; z-index: 1; padding: 5px; border: grey 2px solid; background-color: white;">

			<div id="layer3" align="center"
				style="position: absolute; top: 0; left: 0; width: 298; height: 25; z-index: 1; padding: 5px; border: grey 2px solid; background-color: lightgrey;">
				<a href="" style="position: absolute; top: -5; left: 390;"><img
					src="images/no.png"> </a> <font size="5"> Heading1</font>

			</div>
			<div class="jqHandle jqResize"></div>
		</div>
		<div id=layer4
			style="position: absolute; top: 0; left: 370; width: 300; height: 200; z-index: 1; padding: 5px; border: grey 2px solid; background-color: white;">

			<div id=layer5
				style="position: absolute; top: 0; left: 0; width: 298; height: 25; z-index: 1; padding: 5px; border: grey 2px solid; background-color: lightgrey;">

				heading2</div>
				<div class="jqHandle jqResize"></div>
		</div>
		<div id=layer6
			style="position: absolute; top: 0; left: 720; width: 300; height: 200; z-index: 1; padding: 5px; border: grey 2px solid; background-color: white;">

			<div id=layer7
				style="position: absolute; top: 0; left: 0; width: 298; height: 25; z-index: 1; padding: 5px; border: grey 2px solid; background-color: lightgrey;">

				heading3</div>

		</div>
		<div class="jqHandle jqResize"></div>
	</div>

	<div id=layer1
		style="position: absolute; align: center; top: 100; left: 0; width: 278; height: 787; z-index: 1; padding: 5px; background-color: lightgrey;">
		<a href="" id="close"
			style="position: absolute; top: 0; left: 258; width: 20; height: 10; z-index: 1; padding: 5px; border: #000000 2px; background-color: azure;">
		</a><br> Layer1 data<br> <a href=""
			style="position: absolute; left: 50;">new widget</a><br> <a
			href="" style="position: absolute; left: 50;">new widget</a><br>
		<a href="" style="position: absolute; left: 50;">new widget</a><br>
		<a href="">new widget</a><br> <a href="">new widget</a><br>
		<a href="javascript:testReplace()">testReplace</a><br> <a href="">new widget</a><br>
	</div>


	<form></form>
</body>
</html>
</body>
</html>